<script setup lang="ts">
import HeaderView from '../components/HeaderView.vue'
import FooterView from '../components/FooterView.vue'
import createAxios from '../utils/axios'
// import { getPropose, getConfig } from '../utils/getConfig'
import { useConfig } from '../stores/config'

// 获取配置信息
// getConfig()

//const propose = getPropose()
//const propose = useConfig().propose
// const propose = (): any => {
//   useConfig().getPropose();
// }
// console.log('异步返回的推荐栏目', propose)

</script>

<template>

  <HeaderView />



  <div class="banner">


    <div class="wapnavigations">

      <input placeholder="Please enter the search product name"  @keyup.enter="handleSearch" v-model="searchKeyword"  />
      <button @click="handleSearch">
        <svg t="1747989265619" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10596" width="20" height="20"><path d="M475.3 863.3c-209.7 0-380.2-170.6-380.2-380.2s170.6-380.2 380.2-380.2 380.2 170.6 380.2 380.2c0 209.7-170.6 380.2-380.2 380.2z m0-677.1c-163.7 0-296.9 133.2-296.9 296.9S311.6 780 475.3 780s296.9-133.2 296.9-296.9S639 186.2 475.3 186.2z" fill="#ccc" p-id="10597"></path><path d="M886.3 926.2c-10.3 0-20.5-3.8-28.6-11.4L685.9 752.7c-16.7-15.8-17.5-42.1-1.7-58.9 15.8-16.7 42.1-17.5 58.9-1.7L915 854.3c16.7 15.8 17.5 42.1 1.7 58.9-8.2 8.6-19.3 13-30.4 13z" fill="#ccc" p-id="10598"></path></svg>
      </button>
    </div>


    <el-carousel height="auto" autoplay>
      <el-carousel-item  style="height: auto;">
        <router-link to="/">
            <div class="bannerimg" style="background:#fdbac0">
              <el-image  src="/images/banner0.png" />
            </div>
        </router-link>
      </el-carousel-item>

      <el-carousel-item  style="height: auto">
        <router-link to="/Details/19">
          <div class="bannerimg" style="background-color: #000;">

            <el-image src="images/banner1.png"  />

          </div>

        </router-link>
      </el-carousel-item>

    </el-carousel>
  </div>

  <div class="container-containera">

    <div class="navname">
      <div class="tit">
        <h2>From $0.99 per day</h2>
        <p>Authenticity Guarantee</p>
      </div>
    </div>

    <div class="proalist">

      <div class="list" v-for="item in start99" :key="item.id" >
      <router-link :to="'/Details/'+item.id">
          <el-image :src="item.pic" fit="fill" />
          <div class="prices">$<span>{{ item.price }}</span><i>${{ item.market_price }}</i></div>
          <div class="title">
            {{ item.name }}
          </div>

           <div class="sale">
            Sold {{ item.stock }}
          </div>

      </router-link>
      </div>


    </div>


    <div class="navname">
      <div class="tit">
        <h2>Limited time sale</h2>
        <p>Up to 50% off</p>
      </div>
    </div>


     <div class="proalist ">

      <div class="list" v-for="item in short" :key="item.id" >
        <router-link :to="'/Details/'+item.id">
            <el-image :src="item.pic" fit="fill" />
            <div class="prices">$<span>{{ item.price }}</span><i>${{ item.market_price }}</i></div>
            <div class="title">
             {{ item.name }}
            </div>

            <div class="prices_fd">
              <svg t="1748194609310" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6912" width="14" height="14"><path d="M950.242 266.43c-15.609-15.625-40.953-15.625-56.563 0L650.43 509.664 486.375 345.625c-15.609-15.625-40.953-15.625-56.563 0l-226.27 226.271-65.947-65.946C116.341 484.695 80 499.748 80 529.806v188.456C80 736.895 95.105 752 113.738 752h188.456c30.058 0 45.11-36.341 23.856-57.596l-65.946-65.945 197.989-197.982 164.055 164.039c15.609 15.625 40.953 15.625 56.563 0l271.531-271.523c15.625-15.618 15.625-40.946 0-56.563z" fill="#ffffff" p-id="6913"></path></svg>
              <span>{{ ((item.market_price - item.price) * 100/ item.market_price).toFixed(2) }}%</span></div>
        </router-link>
      </div>






    </div>

    <div class="navname">
      <div class="tit">
        <h2>More Recommendations</h2>
      </div>
    </div>

     <div class="proalistaab">

      <div class="list" v-for="item in propose" :key="item.id">
      <router-link :to="'/Details/'+item.id">
          <el-image :src="item.pic" fit="fill" />
          <div class="prices">$<span>{{ item.price }}</span><i>${{ item.market_price }}</i></div>
          <div class="title">
            {{ item.name }}
          </div>

      </router-link>
      </div>

    </div>




  </div>





  <FooterView />

</template>

<script lang="ts">
export default {
  components: {
  },
  data() {
    return {
      pageTitle: 'Little Rascal',
      searchKeyword:'',
      propose: [],
      short: [],
      start99: [],
    };
  },
  created() {
    this.updateTitle();

    this.fetchGoodList()
  },
  methods: {
    updateTitle() {
      document.title = this.pageTitle; // 或者根据需要动态设置标题

     //this.propose = getPropose()
     //console.log('异步返回的推荐栏目', this.propose)
    },

    // 测试请求接口
    fetchGoodList(){
        /*// 获取已经配置好的
        const config = useConfig()
        // //useConfig().init()
        console.log('系统的配置',config.site)
        console.log('系统的栏目',config.tree)
        console.log('推荐的栏目',config.propose)
        console.log('当前路径', this.$route.path)*/
      createAxios({
          url: '/frontend/home/goods',
          method: 'post',
      })
      .then((res) => {
          console.log('首页获取商品', res)
          console.log('首页获取商品', res.data.start99)
          this.propose = res.data.propose;
          this.short = res.data.short;
          this.start99 = res.data.start99;
      })
      .catch(() => {
      })
    },

        // 获取商品列表
    handleSearch(){
      createAxios({
          url: '/frontend/goods/lists',
          method: 'post',
          data: {keyword: this.searchKeyword},
        },
        {
            showSuccessMessage: false,
        })
        .then((res) => {
            console.log('列表请求结果', res)
            this.lists = res.data.list
        })
        .catch(() => {
        })
    }

  }
}
</script>

<style  >


	.container-containera {
    min-width: 1000px;
		padding: 0 5%;
    margin: 0 auto 0 auto;
    max-width: 1520px;

	}

 .proalist {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;

  .list
   {
    display: inline-block;
    width: 18%;
    padding: 10px 0;
    margin: 1%;

    a {
      width: 100%;
      .el-image {
        display: block;
      }
      img {
        height: 250px;
        width: 100%;
      }
      .prices {
        font-size: 16px;
        padding: 0 2px 0 2px;

          color: #fd384f;
          font-weight: 600;
          span {
            font-size: 22px;
          }
          i {
            font-style: normal;
            font-weight: 500;
            color: #a5a5a5;
            text-decoration: line-through;
            font-size: 12px;
            margin-left: 4px;
          }

      }
      .sale {
        font-size: 12px;
        color: #a5a5a5;
      }

      .title {
        height: 40px;
        line-height: 20px;
        font-weight: 700;
        width: 100%;
        white-space: normal;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }


      .prices_fd {
        display:inline-flex;
        font-size: 10px;
        color: #ffffff;
        background-color: #e62424;
        margin: 4px 0 0 0;
        height: 20px;
        border-radius: 20px;
        padding: 0 10px;
        .icon {
          position: relative;
          top: 3px;
        }
        span {
          margin-left: 2px;
        }
        }
    }
  }
}

 .proalistaab {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    padding-bottom: 20px;
  .list
   {
    display: inline-block;
    width: 18%;
    padding: 10px 0;
    margin: 1%;

    a {
      width: 100%;
      .el-image {
        display: block;
      }
      img {
        height: 250px;
        width: 100%;
      }
      .prices {
        font-size: 16px;
        padding: 0 2px 0 2px;

          color: #fd384f;
          font-weight: 600;
          span {
            font-size: 22px;
          }
          i {
            font-style: normal;
            font-weight: 500;
            color: #a5a5a5;
            text-decoration: line-through;
            font-size: 12px;
            margin-left: 4px;
          }

      }
      .sale {
        font-size: 12px;
        color: #a5a5a5;
      }

      .title {
        height: 40px;
        line-height: 20px;
        font-weight: 700;
        width: 100%;
        white-space: normal;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }
    }
  }
}


.banner {
  margin: 130px auto 0 auto;
  .wapnavigations {
    display: none;
  }
  .bannerimg {
    text-align: center;
    height: 300px;
  }
}
.container-containera {
  .navname {
    text-align: center;
    padding: 50px 0 10px 0;
    line-height: 1.5;
    h2 {
      font-size: 28px;
    }
    p {
      font-size: 12px;
      color: #cccccc;
    }
  }
}

@media only screen and (max-width: 1000px) {
    ::-webkit-scrollbar{ width:0; height:0; }
	::-webkit-scrollbar-track{border-radius:0px;}
	::-webkit-scrollbar-track-piece{ background: #f1f1f1; }
	::-webkit-scrollbar-thumb{  background: #999; border-radius:10px;}
	::-webkit-scrollbar-thumb:hover{background: #999;}
	::-webkit-scrollbar-corner{ background: #999;}

  .container-containera {
    max-width: 90%;
    min-width: 90%;
    width: 90%;
    padding: 0;
    margin-top: 0 !important;
    .navname {
      padding: 20px 0 0 0;
      text-align: left;
      h2 {
        font-size: 18px;
      }
    }
   .proalistaab {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;

  .list
   {
    display: inline-block;
    width: 47%;
    padding: 10px 0 2px 0;
    margin-right: 3%;
    margin-left: 0;

    a {
      width: 100%;
      .el-image {
        display: block;
      }
      img {
        height: 160px !important;
        width: 100%;
      }
      .prices {
        font-size: 16px;
        padding: 0 2px 0 2px;

          color: #fd384f;
          font-weight: 600;
          span {
            font-size: 22px;
          }
          i {
            font-style: normal;
            font-weight: 500;
            color: #a5a5a5;
            text-decoration: line-through;
            font-size: 12px;
            margin-left: 4px;
          }

      }
      .sale {
        font-size: 12px;
        color: #a5a5a5;
      }

      .title {
        height: 40px;
        line-height: 20px;
        font-weight: 500;
        width: 100%;
        white-space: normal;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }
    }
  }
  .list:nth-child(2n)
  {
    margin-right: 0;
  }
}


    .proalist {
      overflow: auto;
      flex-wrap: nowrap;

      -webkit-box-flex: 1;
      -webkit-flex: 1;
      -ms-flex: 1;
      flex: 1;
      -webkit-flex-wrap: nowrap;
      -ms-flex-wrap: nowrap;

      .list {
        width: 160px !important;
        margin-right: 3%;
        margin-left: 0;
        padding-bottom: 0;
        a {
          width: 160px;
        display: block;
        }
        img {
          height: 150px !important;
        }
        .prices_left  {
          font-size: 12px !important;
        span {
          font-size: 16px !important;
        }
         }
        .title {
          font-weight: 500 !important;
        }
      }
    }
  }
  .banner {
    margin:86px 5% 0 5%;
    .bannerimg {
      height: auto !important;
    }
    .el-image {
      overflow: visible;
      border-radius: 10px;
      border-radius: 50px;
    }
    .el-carousel__indicators--horizontal {
      display: none;
    }
   }
   .wapnavigations {
    display: flex !important;
    margin: 0 auto 14px auto;
    background-color: #f2f2f2;
    padding: 6px 10px 6px 16px;
    border-radius: 50px;
    input {
      border: 0;
        outline: medium;
        background-color: #f2f2f2;
        width: 100%;
    }
    button {
      background-color: #f2f2f2;
      border-radius: 100px;
      padding: 2px 10px 0 10px;
      border: 0;
    }
  }
}
</style>
